<script setup lang="ts">
import { getPersonMsg } from '@/api/getAxios2.ts'
import { ref } from 'vue';
import PersonCard from '@/components/Person/PersonCard.vue';
import { user } from '@/store/storeName.ts'
import { showToast } from 'vant';
const getAssetsFile = (url: string) => {
    return new URL(`../../assets/Person/${url}`, import.meta.url).href;
};
const store = user();
// getPersonMsg("123234ffffffsd").then(res => {
//     data.value = res.data
//     console.log(data.value)
// })
const personData = ref([
    { path: "", name: "我的账户", text: "火星币", img: getAssetsFile("my_account_icon.png") },
    { path: "", name: "我的等级", text: "", img: getAssetsFile("my_level.png") },
    { name: "我的收藏", text: "", img: getAssetsFile("收藏.png") },
    // { path: "", name: "最近阅读", text: "", img: getAssetsFile("my_history.png") },
    { path: "", name: "我的消息", text: "", img: getAssetsFile("my_message.png") },
    { path: "", name: "意见反馈", text: "", img: getAssetsFile("my_question.png") },
    // { path: "", name: "常见问题", text: "", img: getAssetsFile("my_question.png") },
    { path: "", name: "设置", text: "", img: getAssetsFile("设置.png") }
])


const getValues = () => {
    let arr = [20, 150, 400, 1000, 2000, 5000, 10000, 20000, 50000]
    let index = 0
    for (let i = 0; i < arr.length; i++) {
        index = i
        if (store.user.levels < arr[i]) {
            break;
        }
    }
    return index;
}

</script>
<template>
    <div class="personBox">
        <div class="top">
            <div class="content" @click="$router.push('/changeMsg')">
                <img src="@/assets/Person/astronaut_n.png" alt="" class="left">
                <div class="center">
                    <div class="name">{{ store.user.uname }} <span>LV.{{getValues()}}</span></div>
                    <div class="msg">{{ store.user.msg || '你还没有任何签名！' }}</div>
                </div>
                <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="right">
            </div>
        </div>
        <div class="orthers">
            <div class="readTime">
                <div><span>{{ store.user.readTime }}</span>分钟</div>
                <div class="tips">本周阅读时长</div>
            </div>
            <div class="active">
                <div><span>{{ store.user.readTime }}</span></div>
                <div class="tips">关注</div>

            </div>
            <div class="fans">
                <div><span>{{ store.user.fans }}</span></div>
                <div class="tips">粉丝</div>

            </div>
        </div>
        <PersonCard :name="item.name" :text="item.text" :img="item.img" v-for="item in personData"></PersonCard>



    </div>
</template>


<style scoped lang="less">
.personBox {
    height: 100vh;
    overflow: scroll;
    box-sizing: border-box;
    padding-bottom: 20vw;

    &::-webkit-scrollbar {
        display: none;
    }
}

.top {
    width: 100%;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/Person/bg_level.png') no-repeat bottom center;
    background-size: cover;
    margin-bottom: -10vw;


    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: white;
        width: 90vw;

        .left {
            width: 20vw;
            display: block;
            // margin-right: -20vw;

        }

        .center {
            width: 59vw;

            .name {
                font-size: 1.25rem;
                margin-bottom: 3vw;
                width: 100%;

                span {
                    color: #d3b96f;
                    font-size: .75rem;
                    border: 1px solid #d3b96f;
                    border-radius: 20px;
                    padding: 1px 10px;
                }

            }

            .msg {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .right {
            width: 10px;
            display: block;
        }
    }
}

.orthers {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw 5vw;
    box-sizing: border-box;
    background-color: white;

    .fans,
    .active,
    .readTime {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: .75rem;

        span {
            font-size: 1.25rem;
        }
    }
}
</style>